import React from "react"
// import { connect } from "react-redux";
import { connect } from './redux/react-redux';
import actionCounter from "./store/actions/counter";
import actionNumber from "./store/actions/number";
class App extends React.Component {
  render () {
    console.log(this.props)
    const { state, dispatch } = this.props;
    return (
      <>
        {/* 不写mapDispatchToProps */}
        {/* <div>{state.counter.counter}</div>
        <button onClick={() => dispatch(actionCounter.add1())}>+</button>
        <button onClick={() => dispatch(actionCounter.minus1())}>-</button> */}

        {/* 函数 */}
        {/* <div>{state.number.number}</div>
        <button onClick={this.props.add2}>+</button>
        <button onClick={this.props.minus2}>-</button> */}

        {/* 对象 */}
        <div>{state.number.number}</div>
        <button onClick={this.props.add2}>+</button>
        <button onClick={this.props.minus2}>-</button>

        {/* <button onClick={() => this.props.history.push({pathname: '/func'})}>push</button> */}
      </>
    )
  }
}

function mapStateToProps(state) {
  return {
    state
  }
}
// 不写mapDispatchToProps，自己就有dispatch，见connect【props中默认会有dispatch】
// 函数 写了mapDispatchToProps，需要自己return dispatch才有dispatch
// 对象 传actionCreators对象，bindActionCreators会包装成dispatch函数
// function mapDispatchToProps(dispatch) {
//   return {
//     add2: () => dispatch(actionNumber.add2()),
//     minus2: () => dispatch(actionNumber.minus2()),
//     dispatch
//   }
// }
const mapDispatchToProps = actionNumber
export default connect(mapStateToProps, mapDispatchToProps)(App);